<template>
	<div class="login-page">
        <div class="form">
            <div class="title">
                <img :src="require('../../images/logo.png')" alt="">
                <span>欢迎使用, 慢病管理云平台</span>
            </div>
            <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                <div>
                    <FormItem prop="account">
                        <Input type="text" v-model="formInline.account" placeholder="用户名">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </div>
                <div>
                    <FormItem prop="password">
                        <Input type="password" v-model="formInline.password" placeholder="密码">
                            <Icon type="ios-lock-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </div>
                <FormItem>
                    <Button :loading="loading" type="primary" @click="handleSubmit('formInline')">登录</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
import { tokenLogin, tokenTokenRefreshToken, } from '../../api/token.js'
import {setCookie,getCookie,removeCookie,} from '../../utils/cookie.js'
export default {
	data() {
		return {
			formInline: {
				account: 'admin',
				password: '123456'
            },
            loading: false,
			ruleInline: {
				account: [{ required: true, message: '请输入正确的用户名', trigger: 'blur' }],
				password: [{ required: true, message: '请输入正确的密码', trigger: 'blur' }, { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }]
            },
		}
	},
	methods: {
        removeToken() {
            removeCookie("token")
            removeCookie("refreshToken")
            localStorage.removeItem("userInfo")
        },
		handleSubmit(name) {
			this.$refs[name].validate(valid => {
				if (valid) {
                    const params = {
                        ...this.formInline,
                        ...{
                            identityType: 'account',
                        },
                    }
                    if (this.loading) return;
                    this.loading = true;
                    tokenLogin(params).then(res => {
                        this.loading = false;
                        if (res.code === "0") {
                            setCookie("token",res.data.token);
                            setCookie("refreshToken",res.data.refreshToken);
                            localStorage.setItem("userInfo",JSON.stringify(res.data));
                            this.$store.commit("setMenus",res.data.resources);
                            this.$Message.success('登录成功');
                            setTimeout(() => {
                                this.$router.push('/')
                            }, 100);
                            // this.$Message.success('This is a success tip');
                            // this.$Message.warning('This is a warning tip');
                            // this.$Message.error('This is an error tip');
                        } else {

                            this.$Modal.warning({
                                title: '登录',
                                content: res.code
                            });
                            this.removeToken()
                        }
                    }).catch(err => {
                        console.log("err>", err)
                        this.$Modal.warning({
                            title: '登录',
                            content: err.errMsg
                        });
                        this.loading = false;
                        this.removeToken()
                        console.log("tokenLogin err-->", err)
                    })
				}
			})
		}
	}
}
</script>
<style lang="scss">
.login-page{
    background: linear-gradient(45deg, #9c27b0, #2196f3);
    
    .title{
        img{
            margin-right: 10px;
        }
        line-height: 300%;
        color: #fff;
        vertical-align: middle;
    }
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
